<!--
  -    Copyright (c) 2018-2025, lengleng All rights reserved.
  -
  - Redistribution and use in source and binary forms, with or without
  - modification, are permitted provided that the following conditions are met:
  -
  - Redistributions of source code must retain the above copyright notice,
  - this list of conditions and the following disclaimer.
  - Redistributions in binary form must reproduce the above copyright
  - notice, this list of conditions and the following disclaimer in the
  - documentation and/or other materials provided with the distribution.
  - Neither the name of the pig4cloud.com developer nor the names of its
  - contributors may be used to endorse or promote products derived from
  - this software without specific prior written permission.
  - Author: lengleng (wangiegie@gmail.com)
  -->
<!--键盘回车事件，只要是类似这种事件都要加上native-->
<template>
  <div class="index-container " @keyup.enter.native="handleLogin">
    <indexTop></indexTop>
    <div class="search-content">
      <indexSearch></indexSearch>
    </div>
    <div class="index-nav">
      <indexNav></indexNav>
    </div>
    <div class="index-carousle">
      <indexCarousel></indexCarousel>
    </div>
    <div class="index-title">
      <indexTitle></indexTitle>
    </div>
    <div class="index-pic">
      <div class="index-pic-container">
         <indexPic v-for="(i,index) in 4" :key="index"></indexPic>
      </div>
      <div class="index-pic-container">
        <indexPic  v-for="(i,index) in 4" :key="index"></indexPic>
      </div>
    </div>
    <div class="index-title">
      <indexTitle></indexTitle>
    </div>
    <div class="new-product">
      <div class="new-container">
        <div class="new-list">
          <div class="new-left">
            <img src="../../assets/img/pic5.png">
          </div>
          <div class="new-right">
            <img src="../../assets/img/bg2_31.png" style="margin-left: -15px;">
            <div class="intro-Con">
              <p class="bigtitle">201x新款韩版纯色修身显瘦游泳性感露腰连体比基尼女夏新露腰连体比基尼女夏新</p>
              <div class="tag">
                <span>HOT</span>
                <span>特惠</span>
                <span>拼团</span>
              </div>
              <p class="smalltitle">
                时尚简约，大气。2018年最新时尚的泳衣，采用最舒适的布料制作而成的，让你快乐艺术啦时尚简约，大气。2018年最新时尚的泳衣，采用最舒适的布料制作而成的，让你快乐艺术啦
              </p>
              <div class="money">
                <div class="btn">￥<span>299.0</span>起</div>
                <span>原价300.0起</span>
              </div>
              <p class="detail">进入详情<span>>></span></p>
            </div>
          </div>
          <div class="mengban"></div>
        </div>
        <div class="new-list">
          <div class="new-left">
            <img src="../../assets/img/pic5.png">
          </div>
          <div class="new-right">
            <img src="../../assets/img/bg2_31.png" style="margin-left: -15px;">
            <div class="intro-Con">
              <p class="bigtitle">201x新款韩版纯色修身显瘦游泳性感露腰连体比基尼女夏新露腰连体比基尼女夏新</p>
              <div class="tag">
                <span>HOT</span>
                <span>特惠</span>
                <span>拼团</span>
              </div>
              <p class="smalltitle">
                时尚简约，大气。舒适的布料制作而成的，让你快乐艺术啦
              </p>
              <div class="money">
                <div class="btn">￥<span>299.0</span>起</div>
                <span>原价300.0起</span>
              </div>
              <p class="detail">进入详情<span>>></span></p>
            </div>
          </div>
          <div class="mengban"></div>
        </div>
        <div class="new-list">
          <div class="new-left">
            <img src="../../assets/img/bg_33.png" >
            <div class="intro-Con">
              <p class="bigtitle">201x新款韩版纯色修身显瘦游泳性感露腰连体比基尼女夏新露腰连体比基尼女夏新</p>
              <div class="tag">
                <span>HOT</span>
                <span>特惠</span>
                <span>拼团</span>
              </div>
              <p class="smalltitle">
                时尚简约，大气。舒适的布料制作而成的，让你快乐艺术啦
              </p>
              <div class="money">
                <div class="btn">￥<span>299.0</span>起</div>
                <span>原价300.0起</span>
              </div>
              <p class="detail">进入详情<span>>></span></p>
            </div>
          </div>
          <div class="new-right">
            <img src="../../assets/img/pic4.png" >
          </div>
          <div class="mengban"></div>
        </div>
        <div class="new-list">
          <div class="new-left">
            <img src="../../assets/img/bg_33.png" >
            <div class="intro-Con">
              <p class="bigtitle">201x新款韩版纯色修身显瘦游泳性感露腰连体比基尼女夏新露腰连体比基尼女夏新</p>
              <div class="tag">
                <span>HOT</span>
                <span>特惠</span>
                <span>拼团</span>
              </div>
              <p class="smalltitle">
                时尚简约，大气。舒适的布料制作而成的，让你快乐艺术啦
              </p>
              <div class="money">
                <div class="btn">￥<span>299.0</span>起</div>
                <span>原价300.0起</span>
              </div>
              <p class="detail">进入详情<span>>></span></p>
            </div>
          </div>
          <div class="new-right">
            <img src="../../assets/img/pic4.png" >
          </div>
          <div class="mengban"></div>
        </div>
      </div>
    </div>
    <div class="index-title">
      <indexTitle></indexTitle>
    </div>
    <div class="recommend">
      <div class="recommend-container">
        <recommend></recommend>
        <recommend></recommend>
        <recommend></recommend>
      </div>
    </div>
    <div class="index-title">
      <indexTitle></indexTitle>
    </div>
    <div class="msg-center">
      <div class="msg-container">
        <msg></msg>
        <msg></msg>
        <msg></msg>
      </div>
    </div>
    <div class="make">
      <div class="make-container">
        <div class="make-mask">
        <p class="mainTit">优雅而不造作，知性而不奢华</p>
          <p>以潮流态度打破传统规则，以不同的个性展现知性的美；改变潮流，改变时代，展现不一样的你，就在泳衣库，泳衣库为你量身打造，最好的自己</p>
          <span class="make-btn">个性定制<span>>></span></span>
        </div>
      </div>
    </div>
    <!--<div class="login-info text-white animated fadeInLeft">-->
      <!--<h2 class="login-info-title">{{website.info.title}}</h2>-->
      <!--<ul class="login-info-list">-->
        <!--<li class="login-info-item" v-for="(item,index) in website.info.list" :key="index">-->
          <!--<i class="el-icon-check"></i>&nbsp;{{item}}-->
        <!--</li>-->
      <!--</ul>-->
    <!--</div>-->
    <!--<div class="login-border  animated fadeInRight">-->
      <!--<div class="login-main">-->
        <!--<h4 class="login-title"> Pig 微服务快速开发框架-->
          <!--<top-theme></top-theme>-->
        <!--</h4>-->
        <!--<el-tabs v-model="activeName">-->
          <!--<el-tab-pane label="用户密码" name="user">-->
            <!--<userLogin></userLogin>-->
          <!--</el-tab-pane>-->
          <!--<el-tab-pane label="短信验证码" name="code">-->
            <!--<codeLogin></codeLogin>-->
          <!--</el-tab-pane>-->
          <!--&lt;!&ndash; <el-tab-pane label="第三方授权登录" name="third">-->
            <!--<thirdLogin></thirdLogin>-->
          <!--</el-tab-pane> &ndash;&gt;-->
        <!--</el-tabs>-->
      <!--</div>-->
    <!--</div>-->

  </div>
</template>
<script>
import indexTop from './top'
import indexSearch from './search'
import indexNav from './nav'
import indexCarousel from './carousel'
import indexTitle from './title'
import indexPic from './pic'
import recommend from './recommend'
import msg from './msg'
import theme from '@/mixins/theme'
import { mapGetters } from 'vuex'
import Index from '../index/index'
export default {
  name: 'login',
  mixins: [theme()],
  components: {
    Index,
    indexSearch,
    indexNav,
    indexCarousel,
    indexTitle,
    indexPic,
    recommend,
    msg,
    indexTop
  },
  data() {
    return {
      activeName: 'user'
    }
  },
  created() {},
  mounted() {},
  computed: {
    ...mapGetters(['website'])
  },
  props: [],
  methods: {}
}
</script>

<style lang="scss">
.index-pic-container{
  width: 1100px;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  padding-bottom: 20px;
  justify-content: space-between;
}
  .index-carousle{
    box-shadow: 0px 5px 2px -6px #2b3040;
    position: relative;
  }
  .new-product{
    width: 100%;
    height:550px;
    margin-bottom: 20px;
  }
  .new-container{
    width: 1100px;
    margin: 0 auto;
    height: 100%;

  }
  .new-list{
    width: 550px;
    height: 275px;
    float: left;

  }
.mengban{
  position: relative;
  left: 0;
  background: rgba(222,228,248,0.6);
  width:550px;
  height: 275px;
  z-index: 444;
  /*left: 200px;*/
  display: none;
}
.new-list:hover .mengban{
  display: block;
  /*background: red;*/
}
  .new-left{
    width: 50%;
    height: 100%;
   float: left;

  }
  .new-left>img{
    position: absolute;
    z-index: 1;
  }
  .new-right{
    width: 50%;
    height: 100%;
    float: right;
    box-shadow: -1px -1px 1px -2px #74798a;
  }
  .new-right>img{
    position: absolute;
    z-index: 2;
  }
  .new-list:nth-child(n+3) .new-left img{
    position: absolute;
    z-index: 3;
    width: 291px;
  }
.new-list:nth-child(n+3) .new-left{
  box-shadow: 1px 1px 1px -1px #74798a
}
.intro-Con{
  position: absolute;
  z-index: 44;
  background: #fff;
  width: 230px;
  height: 233px;
  padding: 20px 24px 22px 20px;
}
.tag>span{
  font-size: 12px;
  color: #3a435f;
  border-radius: 4px;
  border: 1px solid #3a435f;
  padding: 2px;
}
.bigtitle{
   line-height: 25px;
   overflow: hidden;
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   font-size: 16px;
   color: #464646;
   height: 50px;
 }
.smalltitle{
  line-height: 22px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  font-size: 14px;
  color: #464646;
  height: 64px;
  margin-top: 15px;
}
  .money{
    margin-top: 16px;
    display: flex;
    flex-direction: row;
    align-items: flex-end;
  }
  .btn{
    width:116px ;
    height: 26px;
    line-height: 26px;
    font-size: 12px;
    color: #fff;
    background:#3a435f ;
    border-radius: 4px;
    text-align: center;
  }
  .btn>span{
    font-size: 18px;
    font-weight: bold;
    color: #fbc702;
    padding-left: 10px;
    padding-right: 10px;

  }
  .money>span{
    font-size: 12px;
    color: #a6a9b2;
    height: 20px;
    margin-left: 10px;
    text-decoration: line-through;
  }
  .detail{
    font-size: 12px;
    color: #a6a9b2;
    font-family: "Microsoft YaHei";
    float: right;
    margin-top: 10px;
  }
  .detail>span{
    margin-left: 8px;
  }
  .recommend{
    width: 100%;
    height: 528px;
    /*background: red;*/
  }
  .recommend-container{
    width: 1100px;
    margin: 0 auto;
    height: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }
  .msg-center{
    height: 350px;
    width: 100%;
  }
  .msg-container{
    width: 1100px;
    height: 100%;
    margin:0 auto;
    /*background: red;*/
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }
.make{
  width: 100%;
  margin-top: 49px;
  height: 300px;
  background: url("../../assets/img/banner2.png")no-repeat;
  background-size: 100% 100%;

}
.make-mask .mainTit{
     font-size: 28px;
    color: #fff;
    font-family: "Microsoft YaHei";
    text-align: center;
  margin-bottom: 1px;
  }
  .make-mask{
    width: 100%;
    height: 100%;
    padding-top: 64px;
    padding-bottom: 96px;
    background: rgba(43,48,64,0.6);
    height: 140px;
    text-align: center;
  }
  .make-mask p{
    color: #cecece;
    font-size: 14px;
    font-family: "Microsoft YaHei";
    text-align: center;
    display: block;
    margin-bottom: 20px;
  }
  .make-btn{
    margin-top: 20px;
    padding: 10px 60px;
    background: rgba(255,255,255,0.58);
    border-radius: 10px;
    text-align: center;
    color: #232f40;
    font-weight: bold;
    font-size: 16px;
  }
  .make-btn>span{
    margin-left: 10px;
  }
</style>
